<div class="row">
  <div class="large-1 columns">&nbsp;</div>
  <div class="large-10 columns login-box">
	<div class="large-2 columns">&nbsp;</div>
	<div class="large-8 columns">
	<div>
		<div class="alert center" style="background-color:transparent !important; border:0px;">
		<p><?php echo $this->school_name !== '' ? $this->school_name : '';?></p>
		<h3><?=htmlspecialchars(ucwords($userType)); ?></h3>
		</div>
		
		<form action="" method="POST" autocomplete="off">
		<div class="row collapse" >
			<div class="small-3 large-2 columns">
			  <span class="prefix">Username</span>
			</div>
			<div class="small-9 large-10 columns">
			  <input type="text" value="<?=set_value('username');?>" autocomplete="off" name="username" class="ui-corner-all" style="border:#ccc 2px solid;" maxlength="20" required>
			</div>
		</div>
		<div class="row collapse">
			<div class="small-3 large-2 columns">
			  <span class="prefix">Password</span>
			</div>
			<div class="small-9 large-10 columns">
			  <input type="password" name="password" autocomplete="off" class="ui-corner-all" style="border:#ccc 2px solid;" maxlength="20" required>
			</div>
		</div>
		<div class="row collapse">
			<div class="small-3 large-2 columns">
			  <span class="prefix">Captcha</span>
			</div>
			<div class="small-3 large-5 columns">
			  <input type="text" name="captcha_text" autocomplete="off" style="border:#ccc 2px solid;" maxlength="5" required>
			</div>
			<div  class="small-3 large-5 columns" >
				<?=$captcha_image;?>
				<a href="#" data-reveal-id="help" class="btn"><span style="font-size:15px;font-weight:bold;">?</span></a>
			</div>
		</div>
		
		<div class="row collapse">
			<div class="small-3 large-2 columns">
			</div>
			<div class="small-9 large-10 columns">
			 <input type="hidden" name="fit" value="<?=$form_token;?>">
					<input type="submit" value="Login" name="backstage_login" class="btn btn-primary">
					<a href="<?php echo site_url('welcome');?>" class="data-link">Back to Home</a>
			</div>
		</div>
		</form>
		<?=$system_message;?>
		<?php if(validation_errors() !== '') echo '<div class="alert alertbox">'.validation_errors().'</div>';?>
	</div>
	</div>
	<div class="large-2 columns">&nbsp;</div>
  </div>
  <div class="large-1 columns">&nbsp;</div>
</div>

<div id="help" class="reveal-modal">
  <h2>What is This?</h2>
  <p class="lead">How to login</p>
  <p>To login you need a <b><i>username</i></b>, <b><i>password</i></b>, and <b><i>captcha image</i></b></p>
  <p>The <b><i>username</i></b> and <b><i>password</i></b> is unique to every user</p>
  <p>The <b><i>captcha</i></b> is for added security to prevent bots from entering the site
     just type on the string from the image below. The string is (case insensitive) meaning it is either lower or upper
	 and there is no letter "O" only the number zero
  </p>
  <a class="close-reveal-modal">&#215;</a>
</div>